<template>
  <el-card class="mt15 mb15">
    <div slot="header" class="clearfix">
      <span class="f16 fb">录用日程</span>
    </div>
    <div class="search-filter">
      <el-row :gutter="20">
        <el-col :span="6">
          <sitem label="职位名称：">
            <el-input slot="item" v-model="form.jobName" placeholder="请输入关键字" />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="应聘者姓名/电话：">
            <el-input slot="item" v-model="form.nameOrPhone" placeholder="请输入关键字" />
          </sitem>
        </el-col>
        <!-- <el-col :span="6">
          <sitem label="入职日期：">
            <el-select slot="item" v-model="form.dayFlag" clearable placeholder="请选择">
              <el-option v-for="(item,index) in days" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </sitem>
        </el-col> -->
        <el-col :span="6">
          <sitem>
            <el-button slot="item" v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
              搜索
            </el-button>
          </sitem>
        </el-col>
      </el-row>
    </div>

    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
          <tab-pane v-if="activeName==item.key" ref="table" :type="item.key" :form="form" />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import sitem from '@/components/searchItem/index.vue'
import TabPane from './components/TabPane'
export default {
  components: { sitem, TabPane },
  directives: { waves },
  data() {
    return {
      activeName: '1',
      tabMapOptions: [
        { label: '待录用', key: '1' },
        { label: '待入职', key: '2' }
      ],
      days: [
        {
          value: '0',
          label: '不限制'
        },
        {
          value: '1',
          label: '今天之前'
        },
        {
          value: '2',
          label: '今天'
        },
        {
          value: '3',
          label: '今天后'
        }
      ],
      form: {
        jobName: '',
        enName: '',
        nameOrPhone: '',
        dayFlag: ''
      },
      importanceOptions: ['不限', '以前', '今天', '以后']
    }
  },
  methods: {
    // 搜索
    handleFilter() {
      this.$refs.table[0].getList()
    }
  }
}
</script>
<style lang="scss" scoped>
  .filter-container{
    line-height: 36px;
    font-size: 14px;
    margin-bottom: 10px;
    .filter-item{
      margin-bottom: 0;
    }
  }
</style>
